<template>
	<view class="body">
		<swiper class="swiper" :circular="true" indicator-active-color="#ffffff" :indicator-dots="indicatorDots" :autoplay="autoplay"
		 :interval="interval" :duration="duration">
			<swiper-item class="swss" v-for="item in list" :key="item.id">
				<image class="logo" :src="item.img_url" mode=""></image>
			</swiper-item>


		</swiper>
		<view class="top">
			<image class="icon1" src="../../static/icons/chat.png" mode=""></image>
			<image class="icon2" src="../../static/icons/search.png" mode=""></image>
			<image class="icon3" src="../../static/icons/cart.png" mode=""></image>
		</view>


		<view class="tuijian">
			<view class="p1">
				品牌推荐
			</view>
			<view class="p2">
				更多
				<image src="../../static/icons/arr-r-1.png" mode=""></image>
			</view>
		</view>
		<!-- 系列 -->
		<view class="xilie">
			<view class="kuai" v-for="item in brandList" :key="item.id">
				<view class="kuai1">
				</view>
			<image class="logo1" :src="item.coverImg" mode=""></image>
			<view class="p3">
				{{item.cname}}系列
			</view>
			
			<view class="p4">
				by {{item.ename}}
			</view>
			</view>
			
		</view>
		
		
		
		
		<!-- 特色优选 -->
		<view class="youxuan">
			<view class="p1">
				特色优选
			</view>
			<view class="p2">
				更多
				<image src="../../static/icons/arr-r-1.png" mode=""></image>
			</view>
		</view>
		
		
		<!-- 底部 -->
		<!-- <scroll-view scroll-x="true" class="scroll-view" > -->
			<view class="di">
				
				
			<view class="footer" v-for="item in brandList2" :key="item.id">
			<image class="k1" :src="item.coverImg" mode=""></image>
			
			<view class="k2">
				
				<view class="p1">
				现代极简吊灯
			</view>
			<view class="p2">
				by Adrianne Ho
			</view>
			
			<view class="yuan">
				<view class="yuan2">
					
				</view>
				
				<view class="yuan3">
					
				</view>
				
				<view class="yuan4">
					
				</view>
			</view>
			
			</view>
			
			
			
			
			
			
			
			</view>
			
			
			
		</view>
		<!-- </scroll-view> -->
			

		


<view class="bai">
	
</view>





	</view><!-- body -->
</template>

<script>
	import {
		banners
	} from "../../util/home/index.js"
	import {
		brandList
	} from "../../util/home/brandList.js"
	import {
		hotList
	} from "../../util/home/hotList.js"
	
	
	
	export default {
		data() {    
			return {
				list: [],
				brandList:[],
				brandList2:[],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500
			};
		},

		onLoad() {
			banners({
					use: 0
				})
				.then(res => {
					console.log(res);
					this.list = res.data.data;
				}),
				brandList({
				})
				.then(res =>{
					console.log(res);
					this.brandList2=res.data.data
					this.brandList.push(res.data.data[6])
					this.brandList.push(res.data.data[8])
					this.brandList.push(res.data.data[12])
					
					console.log(this.brandList);
				}),
				hotList({
					
					})
					.then(res => {
						console.log(res);
					})

		}
	};
</script>


<style lang="scss" scoped>
	.body {

		background-color: #F1ECE7;
		width: 100%;
		height: 100%;
		
	}


	.swiper {
		position: relative;
		width: 100%;
		height: 516rpx;
	}

	.top {
		width: calc(100%-60rpx);
		height: 45rpx;
		position: absolute;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		top: 90rpx;
		left: 0;

		.icon1 {
			width: 42rpx;
			height: 42rpx;
		}

		.icon2 {
			width: 36rpx;
			height: 36rpx;
			margin-left: 540rpx;
		}

		.icon3 {
			width: 34rpx;
			height: 30rpx;
			margin-left: 36rpx;
		}
	}

	.swiper .logo {
		width: 100%;
		height: 516rpx;
		border-radius: 0 0 30px 30px;
	}

	.tuijian {
		display: flex;
		justify-content: space-between;
		width: calc(100%-80rpx);
		height: 45rpx;
		padding: 0 40rpx;
		margin-top: 40rpx;

		.p1 {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			font-weight: bold;
		}

		.p2 {
			font-size: 26rpx;
			color: #8C8C8C;
			letter-spacing: 1.86rpx;

			image {
				width: 11rpx;
				height: 18rpx;
			}
		}
	}


	.xilie {
		display: flex;
		width: calc(100%-44rpx);
		height: 330rpx;
		justify-content: space-between;
		padding: 0 22rpx;

		.kuai {
			width: 208rpx;
			height: 290rpx;
		
			margin-top: 40rpx;
			.kuai1{
				width: 208rpx;
				height: 140rpx;
				background: #FFFFFF;
				box-shadow: 0 8rpx 24rpx 0 rgba(122,98,75,0.06);
				border-radius: 20rpx;
			}
		.logo1{
			width: 144rpx;
			height: 124rpx;
			margin-left: 32rpx;
			margin-top: -90rpx;
			
		}
		
		.p3{
			font-size: 26rpx;
			color: #3E3E3E;
			font-weight: bold;
			text-align: center;
			margin-top: 44rpx;
		}
		
		.p4{
			font-size: 20rpx;
			color: #B0B0B0;
			text-align: center;
		}

		}
	}
	
	
	.youxuan{
		display: flex;
		justify-content: space-between;
		width: calc(100%-80rpx);
		height: 45rpx;
		padding: 0 40rpx;
		margin-top: 46rpx;
		
		.p1 {
			font-size: 32rpx;
			color: #3E3E3E;
			letter-spacing: 2.29rpx;
			font-weight: bold;
		}
		
		.p2 {
			font-size: 26rpx;
			color: #8C8C8C;
			letter-spacing: 1.86rpx;
		
			image {
				width: 11rpx;
				height: 18rpx;
			}
		}
		
	}
	
	.di{
	
		 
		 
			 display: flex;
			   width: 100%;
			   height: 315rpx;
			   margin-top: 39rpx;
			   overflow-x: auto;
		 
		 
		 .footer{
			 position: relative;
		display: flex;
		width: 590rpx;
		height: 315rpx;
		margin: 0 auto;
		margin-left: 40rpx;
		.k1{
			position: absolute;
			left: 44rpx;
			width: 194rpx;
			height: 280rpx;
			border-radius: 20rpx;
		}
		
		.k2{
			width: 590rpx;
			height: 260rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 55rpx;
			.p1{
			font-size: 26rpx;
			color: #3E3E3E;
			font-weight: bold;
			margin-left: 274rpx;
			margin-top: 50rpx;
		}
		
		.p2{
			font-size: 18rpx;
			color: #B0B0B0;
			margin-left: 274rpx;
		}
		
		.yuan{
			display: flex;
			width: 100rpx;
			height: 20rpx;
			justify-content: space-between;
			margin-left: 274rpx;
			margin-top: 20rpx;
			.yuan2{
				width: 20rpx;
				height: 20rpx;
				background-color: #446675;
				border-radius: 50%;
			}
			.yuan3{
				width: 20rpx;
				height: 20rpx;
				background-color: #6A4826;
				border-radius: 50%;
			}
			.yuan4{
				width: 20rpx;
				height: 20rpx;
				background-color: #E7D8BB;
				border-radius: 50%;
			}
		}
		
		}
		
		
	}
	
	
	}
	
	.di::-webkit-scrollbar{
    display:none;
}
	
	
	
	.bai{
		height: 100rpx;
	}
</style>
